<template>
  <div class="login-container pull-height">
    <div class="login-info text-white animated fadeInLeft">
      <div class="logo" style="margin-top:-426px">
<!--         <img src="../../assets/images/home/logo.png" width="160px" height="160px" alt="logo" style="vertical-align: middle;" />-->
      </div>
      <!-- <h2 class="login-info-title">{{website.info.title}}</h2> -->
    </div>
    <div class="login-border  animated fadeInRight">
      <div class="login-main">
        <h4 class="login-title">登录{{website}}</h4>
        <!-- <el-tabs v-model="activeName"> -->
        <!-- <el-tab-pane label="用户密码" name="user"> -->
<!--        <userLogin></userLogin>-->
        <!-- </el-tab-pane> -->
        <!-- </el-tabs> -->

        <el-form class="login-form" status-icon :rules="loginRules" ref="loginForm" :model="loginForm" label-width="0">
          <el-form-item prop="user_name">
            <el-input size="small" v-model="loginForm.user_name" auto-complete="off" placeholder="请输入用户名">
              <i slot="prefix" class="icon-businesscard"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input size="small" type="password" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码">
              <i class="el-icon-view el-input__icon" slot="suffix"></i>
              <i slot="prefix" class="icon-lock"></i>
            </el-input>
          </el-form-item>

          <!-- <el-checkbox v-model="checked">记住账号</el-checkbox> -->
          <el-form-item>
            <el-button type="primary" size="small" class="login-submit" @click.native.prevent="handleLogin">登录</el-button>
          </el-form-item>
        </el-form>

      </div>
    </div>

  </div>
</template>

<script>

import axios from 'axios'
import service from '../../utils/request'
import Config from '../../utils/config'
export default {
  name: "index",
  data(){
    return{
      website:'敦煌ERP',
      loginForm:{
        user_name: '',
        password: '',
      },
      loginRules:{
        user_name:[{required:true,message:'请您输入用户名',trigger:'blur'}],
        password: [{required:true,message:'请您输入密码',trigger:'blur'}, { min: 6, message: '密码最少6个字', trigger: 'blur' }]
      }
    }
  },
  methods:{
    handleLogin(){
      this.$store.commit('SET_TOKEN', 'asdasdhkhksyhioyhioawe|7')
      this.$store.commit('SET_USER_ID', 'asdasdhkhksyhioyhioawe|7')
      this.$router.push({ path: '/' })

      this.$refs.loginForm.validate(valid => {
        if(valid){
          var data = {
            user_name: this.loginForm.user_name,
            password: this.loginForm.password,
            vcode:''
          }

          service({
            url: Config.getToken,
            method: 'post',
            data: data
          }).then(result=>{
            this.$store.commit('SET_TOKEN', result.token)
            this.$store.commit('SET_USER_ID', result.token)
            this.$router.push({ path: '/' })
          });
        }
      })
    },
    doLogin() {
      this.$store.commit("SET_NAME",'sssss');
    },
    showState(){
      this.$store.commit("showState");
    }
  },
  computed:{
    getName(){
      return this.$store.state.token
    }
  }
}
</script>


<style>
.login-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(0, 0, 0, 0.2);
  position: relative;
  height: 100%;
  padding-bottom: 550px;
}
.login-container::before {
}
.login-info-title {
  line-height: 90px;
}
.login-info-item {
  font-size: 14px;
}
.login-border {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 30px 50px 25px 50px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 1px 1px 2px #eee;
  margin: 0 auto;
  margin-top: 200px;
}
.login-main {
  border-radius: 3px;
  box-sizing: border-box;
  background-color: #fff;
}
.login-main > h3 {
  margin-bottom: 20px;
}
.login-main > p {
  color: #76838f;
}
.login-title {
  margin: 0 0 20px;
  text-align: center;
  color: #409eff;
  letter-spacing: 3px;
}
.login-submit {
  margin-top: 20px;
  width: 100%;
  border-radius: 28px;
}
.login-form {
  margin: 10px 0;
}

.el-input__prefix i {
  padding: 0 5px;
  font-size: 16px !important;
}
.el-input input {
  text-indent: 5px;
  border-color: #dcdcdc;
  border-radius: 3px;
}
.el-form-item__content {
  width: 270px;
}
.el-form-item {
  margin-bottom: 12px;
}
.login-code {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0 0 0 10px;
}
.login-code-img {
  margin-top: 2px;
  width: 100px;
  height: 32px;
  background-color: #fdfdfd;
  border: 1px solid #f0f0f0;
  color: #333;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 5px;
  line-height: 32px;
  text-indent: 5px;
  text-align: center;
}
</style>
